<template>
  <div>
    <div class="login-container">
      <div class="title" ><h4>商家登录/注册</h4></div>
      <hr>
      <form >
        <div class="form-group">
          <label for="exampleInputEmail1">手机号</label>
          <input  class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                  v-model.trim="user.username">
          <small id="emailHelp" class="form-text text-muted"></small>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">密码</label>
          <input type="password" class="form-control" id="exampleInputPassword1"
                  v-model.trim="user.password">

        </div>

        <button type="submit" class="btn btn-primary" @click.prevent="onLoginClick" >登录/注册</button>
      </form>
    </div>

  </div>
</template>

<script>
export default {
  name: 'MerchantLogin',
  data() {
    return {
        user: {
          type: 0,
          username: "",
          password: ""
        }

    }
  },

  methods: {
    async onLoginClick() {
      const {data: res} = await this.$http.post('/merchant/login',this.user)
      console.log(res.data)
      if(res.data===1){
        localStorage.setItem("username_M",this.user.username)
        await this.$router.push('/merchantMain')
      }
      else if(res.data===2){
        alert('密码错误')
      }
      else if(res.data===3){
        alert('输入有误')
      }else {
        alert('账号封禁中')
      }


    }
  }


}
</script>

<style lang="less" scoped>
.login-container {
  width: 600px;
  height: 400px;
  background-color: #4d7bf3;
  box-sizing: border-box;
  padding: 40px;
  border-radius: 15px;
  margin: 0 auto;
}

.title {
  color: white;
  margin: 0 auto;

}

.btn {
  color: #4d7bf3;
  background-color: white;

}
.btn-primary {
  margin: 0 auto;
}
</style>
